<template>
  <div class="bigBox">
    <div class="container">
      <h3>
        <span @click="backToMy"><van-icon name="arrow-left" /></span>
        我的订单
      </h3>
    </div>
    <div class="navTab">
      <van-tabs v-model="active">
        <van-tab title="全部" name="0" key="0">
          <van-card
            num="1"
            :price="detail.price"
            :content="detail.content"
            :title="detail.name"
            :thumb="detail.image"
          />
        </van-tab>
        <van-tab title="待付款" name="1" key="1">
          <van-card
            num="1"
            :price="detail.price"
            :title="detail.name"
            :thumb="detail.image"
          />
        </van-tab>
        <van-tab title="待发货" name="2" key="2">
          <van-card
            num="1"
            :price="detail.price"
            :title="detail.name"
            :thumb="detail.image"
          />
        </van-tab>
        <van-tab title="待收货" name="3" key="3">
          <van-card
            num="1"
            :price="detail.price"
            :title="detail.name"
            :thumb="detail.image"
          />
        </van-tab>
        <van-tab title="退款售后" name="4" key="4">
          <van-card
            num="1"
            :price="detail.price"
            :title="detail.name"
            :thumb="detail.image"
          />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template> 

<script>
export default {
  name: "",
  props: {},

  data() {
    return {
      active: 0,
      detail: [{}],
    };
  },
  methods: {
    getGoodsDetails() {
      this.$api
        .getGoodsDetails({
          id: this.id,
        })
        .then((res) => {
          if (res.code == 200) {
            // console.log(res.data);
            res.data.content = res.data.content.replace(
              /<img/g,
              "<img style='max-width:100%;height:auto;'"
            );
            this.detail = res.data;
          }
        });
    },
    backToMy() {
      this.$router.push({ path: "/my" });
    },
  },
  beforeMount() {
    this.active = this.$route.query.active;
    this.id = this.$route.query.id;
    this.getGoodsDetails();
  },
};
</script>

<style lang='scss' scoped>
.bigBox {
  width: 100%;
  height: 100%;
  background-color: #e5e5e5;
  .container {
    width: 100%;
    height: 2.38rem;
    background-color: #30ccb5;
    position: relative;
    h3 {
      position: relative;
      color: #fff;
      font-weight: normal;
      text-align: center;
      font-size: 0.92rem;
      line-height: 2.38rem;
      span {
        position: absolute;
        font-size: 0.92rem;
        left: 0.89rem;
      }
    }
  }
  .navTab {
    width: 100%;
    height: 5.33rem;
    background-color: #fff;
  }
}
</style>